<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1"><!-- Place ../favicon.ico in the root directory -->
    <link rel="apple-touch-icon" href="../apple-touch-icon.png">
    <link rel="icon" href="../favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
    <title>Dashcore - Premium Software & Startup HTML</title><!-- themeforest:css -->
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../css/aos.css">
    <link rel="stylesheet" href="../css/cookieconsent.min.css">
    <link rel="stylesheet" href="../css/magnific-popup.css">
    <link rel="stylesheet" href="../css/odometer-theme-minimal.css">
    <link rel="stylesheet" href="../css/prism-okaidia.css">
    <link rel="stylesheet" href="../css/simplebar.css">
    <link rel="stylesheet" href="../css/smart_wizard.css">
    <link rel="stylesheet" href="../css/smart_wizard_theme_arrows.css">
    <link rel="stylesheet" href="../css/smart_wizard_theme_circles.css">
    <link rel="stylesheet" href="../css/smart_wizard_theme_dots.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/theme.css">
    <link rel="stylesheet" href="../css/rtl.css"><!-- endinject -->
</head>

<body>
    <!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
    <nav class="st-nav navbar main-nav navigation fixed-top">
        <div class="container">
            <ul class="st-nav-menu nav navbar-nav">
                <li class="st-nav-section nav-item"><a href="#main" class="navbar-brand"><img src="../img/logo.png" alt="Dashcore" class="logo logo-sticky d-block d-md-none"></a></li>
                <li class="st-nav-section st-nav-primary nav-item"><a class="st-root-link item-products nav-link">Home </a><a class="st-root-link item-pages st-has-dropdown nav-link" data-dropdown="pages">Pages </a><a class="st-root-link item-blocks st-has-dropdown nav-link" data-dropdown="blocks">Blocks </a><a class="st-root-link item-components st-has-dropdown nav-link" data-dropdown="components">UI Components </a><a class="st-root-link item-blog st-has-dropdown nav-link" data-dropdown="blog">Blog </a><a class="st-root-link item-shop st-has-dropdown nav-link" href="../shop/" data-dropdown="shop">Shop</a></li><!-- Mobile Navigation -->
                <li class="st-nav-section st-nav-mobile nav-item"><button class="st-root-link navbar-toggler" type="button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
                    <div class="st-popup">
                        <div class="st-popup-container"><a class="st-popup-close-button">Close</a>
                            <div class="st-dropdown-content-group">
                                <h4 class="text-uppercase regular">Pages</h4><a class="regular text-primary" href="../about.html"><i class="far fa-building icon"></i> About </a><a class="regular text-success" href="../contact.html"><i class="far fa-envelope icon"></i> Contact </a><a class="regular text-warning" href="../pricing.html"><i class="fas fa-hand-holding-usd icon"></i> Pricing </a><a class="regular text-info" href="../faqs.html"><i class="far fa-question-circle icon"></i> FAQs</a>
                            </div>
                            <div class="st-dropdown-content-group b-t bw-2">
                                <h4 class="text-uppercase regular">Components</h4>
                                <div class="row">
                                    <div class="col mr-4"><a target="_blank" href="../components/alert.html">Alerts</a> <a target="_blank" href="../components/badge.html">Badges</a> <a target="_blank" href="../components/button.html">Buttons</a> <a target="_blank" href="../components/color.html">Colors</a> <a target="_blank" href="../components/accordion.html">Accordion</a> <a target="_blank" href="../components/cookie-law.html">Cookielaw</a></div>
                                    <div class="col mr-4"><a target="_blank" href="../components/overlay.html">Overlay</a> <a target="_blank" href="../components/progress.html">Progress</a> <a target="_blank" href="../components/lightbox.html">Lightbox</a> <a target="_blank" href="../components/tab.html">Tabs</a> <a target="_blank" href="../components/tables.html">Tables</a> <a target="_blank" href="../components/typography.html">Typography</a></div>
                                </div>
                            </div>
                            <div class="st-dropdown-content-group bg-light b-t"><a target="_blank" href="../components/wizard.html">Wizard <span class="badge badge-pill badge-primary">New</span></a></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="st-dropdown-root">
            <div class="st-dropdown-bg">
                <div class="st-alt-bg"></div>
            </div>
            <div class="st-dropdown-arrow"></div>
            <div class="st-dropdown-container">
                <div class="st-dropdown-section" data-dropdown="pages">
                    <div class="st-dropdown-content">
                        <div class="st-dropdown-content-group">
                            <div class="mb-4">
                                <h3 class="text-darker light text-nowrap"><span class="bold regular">Useful pages</span> you'll need</h3>
                                <p class="text-secondary mt-0">Get a complete design stack</p>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <ul class="mr-4">
                                        <li>
                                            <h4 class="text-uppercase regular">Error</h4>
                                        </li>
                                        <li><a target="_blank" href="../403.html">403 Error</a></li>
                                        <li><a target="_blank" href="../404.html">404 Error</a></li>
                                        <li><a target="_blank" href="../405.html">405 Error</a></li>
                                    </ul>
                                </div>
                                <div class="col">
                                    <ul class="mr-4">
                                        <li>
                                            <h4 class="text-uppercase regular">User</h4>
                                        </li>
                                        <li><a target="_blank" href="../login.html">Login</a></li>
                                        <li><a target="_blank" href="../register.html">Register</a></li>
                                        <li><a target="_blank" href="../forgot.html">Forgot</a></li>
                                    </ul>
                                </div>
                                <div class="col">
                                    <ul>
                                        <li>
                                            <h4 class="text-uppercase regular">Extra</h4>
                                        </li>
                                        <li><a target="_blank" href="../pricing.html">Pricing</a></li>
                                        <li><a target="_blank" href="../terms.html">Terms</a></li>
                                        <li><a target="_blank" href="../faqs.html">FAQ</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="st-dropdown-content-group"><a class="dropdown-item bold" target="_blank" href="../about.html"><i class="far fa-building icon"></i> About </a><a class="dropdown-item bold" target="_blank" href="../contact.html"><i class="far fa-envelope icon"></i> Contact </a><a class="dropdown-item bold" target="_blank" href="../pricing.html"><i class="fas fa-hand-holding-usd icon"></i> Pricing</a></div>
                    </div>
                </div>
                <div class="st-dropdown-section" data-dropdown="blocks">
                    <div class="st-dropdown-content">
                        <div class="st-dropdown-content-group">
                            <div class="row">
                                <div class="col mr-4"><a class="dropdown-item" target="_blank" href="../blocks/call-to-action.html">Call to actions</a> <a class="dropdown-item" target="_blank" href="../blocks/contact.html">Contact</a> <a class="dropdown-item" target="_blank" href="../blocks/counter.html">Counters</a> <a class="dropdown-item" target="_blank" href="../blocks/faqs.html">FAQs</a></div>
                                <div class="col mr-4"><a class="dropdown-item" target="_blank" href="../blocks/footer.html">Footers</a> <a class="dropdown-item" target="_blank" href="../blocks/form.html">Forms</a> <a class="dropdown-item" target="_blank" href="../blocks/navbar.html">Navbar</a> <a class="dropdown-item" target="_blank" href="../blocks/navigation.html">Navigation</a></div>
                                <div class="col"><a class="dropdown-item" target="_blank" href="../blocks/pricing.html">Pricing</a> <a class="dropdown-item" target="_blank" href="../blocks/slider.html">Sliders</a> <a class="dropdown-item" target="_blank" href="../blocks/team.html">Team</a> <a class="dropdown-item" target="_blank" href="../blocks/testimonial.html">Testimonials</a></div>
                            </div>
                        </div>
                        <div class="st-dropdown-content-group">
                            <h3 class="link-title"><i class="fas fa-long-arrow-alt-right icon"></i> Coming soon</h3>
                            <div class="ml-5"><span class="dropdown-item text-secondary">Dividers </span><span class="dropdown-item text-secondary">Gallery </span><span class="dropdown-item text-secondary">Screenshots</span></div>
                        </div>
                    </div>
                </div>
                <div class="st-dropdown-section" data-dropdown="components">
                    <div class="st-dropdown-content">
                        <div class="st-dropdown-content-group"><a class="dropdown-item" target="_blank" href="../components/color.html">
                                <div class="media align-items-center mb-2">
                                    <div class="bg-dark text-contrast icon-md center-flex rounded-circle mr-3"><i class="fas fa-palette"></i></div>
                                    <div class="media-body">
                                        <h3 class="link-title m-0">Colors</h3>
                                        <p class="m-0 text-secondary">Get to know DashCore color options</p>
                                    </div>
                                </div>
                            </a><a class="dropdown-item" target="_blank" href="../components/accordion.html">
                                <div class="media align-items-center mb-2">
                                    <div class="bg-success text-contrast icon-md center-flex rounded-circle mr-3"><i class="fas fa-bars"></i></div>
                                    <div class="media-body">
                                        <h3 class="link-title m-0">Accordion</h3>
                                        <p class="m-0 text-secondary">Useful accordion elements</p>
                                    </div>
                                </div>
                            </a><a class="dropdown-item" target="_blank" href="../components/cookie-law.html">
                                <div class="media align-items-center mb-4">
                                    <div class="bg-info text-contrast icon-md center-flex rounded-circle mr-3"><i class="fas fa-cookie-bite"></i></div>
                                    <div class="media-body">
                                        <h3 class="link-title m-0">CookieLaw</h3>
                                        <p class="m-0 text-secondary">Comply with the hideous EU Cookie Law</p>
                                    </div>
                                </div>
                            </a>
                            <h4 class="text-uppercase regular">Huge components list</h4>
                            <div class="row">
                                <div class="col mr-4"><a class="dropdown-item" target="_blank" href="../components/alert.html">Alerts</a> <a class="dropdown-item" target="_blank" href="../components/badge.html">Badges</a> <a class="dropdown-item" target="_blank" href="../components/button.html">Buttons</a></div>
                                <div class="col mr-4"><a class="dropdown-item" target="_blank" href="../components/overlay.html">Overlay</a> <a class="dropdown-item" target="_blank" href="../components/progress.html">Progress</a> <a class="dropdown-item" target="_blank" href="../components/lightbox.html">Lightbox</a></div>
                                <div class="col mr-4"><a class="dropdown-item" target="_blank" href="../components/tab.html">Tabs</a> <a class="dropdown-item" target="_blank" href="../components/tables.html">Tables</a> <a class="dropdown-item" target="_blank" href="../components/typography.html">Typography</a></div>
                            </div>
                        </div>
                        <div class="st-dropdown-content-group"><a class="dropdown-item" target="_blank" href="../components/wizard.html">Wizard <span class="badge badge-pill badge-primary">New</span></a> <span class="dropdown-item d-flex align-items-center text-muted">Timeline <i class="fas fa-ban ml-auto"></i></span> <span class="dropdown-item d-flex align-items-center text-muted">Process <i class="fas fa-ban ml-auto"></i></span></div>
                    </div>
                </div>
                <div class="st-dropdown-section" data-dropdown="blog">
                    <div class="st-dropdown-content">
                        <div class="st-dropdown-content-group">
                            <div class="row">
                                <div class="col mr-4">
                                    <h4 class="regular text-uppercase">Full width</h4><a class="dropdown-item" target="_blank" href="../blog/blog-post.html">Single post</a> <a class="dropdown-item" target="_blank" href="../blog/blog-grid.html">Posts Grid</a>
                                </div>
                                <div class="col mr-4">
                                    <h4 class="regular text-uppercase">Sidebar left</h4><a class="dropdown-item" target="_blank" href="../blog/blog-post-sidebar-left.html">Single post</a> <a class="dropdown-item" target="_blank" href="../blog/blog-grid-sidebar-left.html">Posts Grid</a>
                                </div>
                                <div class="col mr-4">
                                    <h4 class="regular text-uppercase">Sidebar right</h4><a class="dropdown-item" target="_blank" href="../blog/blog-post-sidebar-right.html">Single post</a> <a class="dropdown-item" target="_blank" href="../blog/blog-grid-sidebar-right.html">Posts Grid</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="st-dropdown-section" data-dropdown="shop">
                    <div class="st-dropdown-content">
                        <div class="st-dropdown-content-group"><a class="dropdown-item" target="_blank" href="../shop/home.html">
                                <div class="media align-items-center">
                                    <div class="bg-success text-contrast icon-md center-flex rounded-circle mr-3"><i class="fas fa-shopping-basket"></i></div>
                                    <div class="media-body">
                                        <h3 class="link-title m-0">Home</h3>
                                        <p class="m-0 text-secondary">Online store home with an outstanding UX</p>
                                    </div>
                                </div>
                            </a><a class="dropdown-item" target="_blank" href="../shop/cart.html">
                                <div class="media align-items-center">
                                    <div class="bg-info text-contrast icon-md center-flex rounded-circle mr-3"><i class="fas fa-shopping-cart"></i></div>
                                    <div class="media-body">
                                        <h3 class="link-title m-0">Cart</h3>
                                        <p class="m-0 text-secondary">Online store shopping cart</p>
                                    </div>
                                </div>
                            </a></div>
                        <div class="st-dropdown-content-group">
                            <h3 class="link-title"><i class="fas fa-money-check-alt icon"></i> Checkout</h3>
                            <div class="ml-5"><a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-customer.html">Customer <i class="fas fa-angle-right ml-2"></i> </a><a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-shipping.html">Shipping Information <i class="fas fa-angle-right ml-2"></i> </a><a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-payment.html">Payment Methods <i class="fas fa-angle-right ml-2"></i> </a><a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-confirmation.html">Order Review <i class="fas fa-angle-right ml-2"></i></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <main>
        <header class="page header text-contrast overlay gradient gradient-purple-blue alpha-8 image-background cover" style="background-image: url('../img/bg/waves.jpg')">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h1 class="display-4 text-contrast mb-4">Colors</h1>
                        <p class="lead text-contrast">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
                    </div>
                </div>
            </div>
        </header>
        <section class="section b-b">
            <div class="container">
                <div class="section-heading">
                    <h2 id="examples">Text color</h2>
                </div>
                <p class="b-b pb-2 mb-5 text-secondary">Bootstrap default</p>
                <div class="row gap-y">
                    <div class="col-6 col-md-3">
                        <p class="text-primary bg- p-3">.text-primary</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-secondary bg- p-3">.text-secondary</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-success bg- p-3">.text-success</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-danger bg- p-3">.text-danger</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-warning bg- p-3">.text-warning</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-info bg- p-3">.text-info</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-light bg-dark p-3">.text-light</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-dark bg- p-3">.text-dark</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-body bg- p-3">.text-body</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-muted bg- p-3">.text-muted</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-white bg-dark p-3">.text-white</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-black-50 bg- p-3">.text-black-50</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-white-50 bg-dark p-3">.text-white-50</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-alternate bg- p-3">.text-alternate</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-contrast bg-dark p-3">.text-contrast</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-darker bg- p-3">.text-darker</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <p class="text-black bg- p-3">.text-black</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section b-b">
            <div class="container">
                <div class="section-heading">
                    <h2 id="examples">Background color</h2>
                    <p class="lead">Easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <span class="bold">do not set</span> <code>color</code>, so in some cases you’ll want to use <code>.text-*</code> utilities.</p>
                </div>
                <p class="b-b pb-2 mb-5 text-secondary">Bootstrap default</p>
                <div class="row gap-y">
                    <div class="col-6 col-lg-4">
                        <div class="bg-primary text-white lead p-4">.bg-primary</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-secondary text-white lead p-4">.bg-secondary</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-success text-white lead p-4">.bg-success</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-danger text-white lead p-4">.bg-danger</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-warning text-white lead p-4">.bg-warning</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-info text-white lead p-4">.bg-info</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-light text-dark lead p-4">.bg-light</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-dark text-white lead p-4">.bg-dark</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-alternate text-white lead p-4">.bg-alternate</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-contrast text-dark lead p-4">.bg-contrast</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-darker text-dark lead p-4">.bg-darker</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="bg-black text-dark lead p-4">.bg-black</div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section b-b" id="colors-gradient">
            <div class="container">
                <div class="section-heading">
                    <h2 id="examples">Gradients</h2>
                    <p class="lead">You can opt to use gradients background by adding <code>.gradient</code> to any element.</p>
                </div>
                <div class="row gap-y">
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-purple-blue text-contrast lead p-4">.gradient-purple-blue</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-purple-dark text-contrast lead p-4">.gradient-purple-dark</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-purple-navy text-contrast lead p-4">.gradient-purple-navy</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-blue-purple text-contrast lead p-4">.gradient-blue-purple</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-blue-dark text-contrast lead p-4">.gradient-blue-dark</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-blue-navy text-contrast lead p-4">.gradient-blue-navy</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-navy-blue text-contrast lead p-4">.gradient-navy-blue</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-navy-purple text-contrast lead p-4">.gradient-navy-purple</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-primary-dark text-contrast lead p-4">.gradient-primary-dark</div>
                    </div>
                    <div class="col-6 col-lg-4">
                        <div class="gradient gradient-primary-light text-contrast lead p-4">.gradient-primary-light</div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section b-b">
            <div class="container">
                <div class="section-heading">
                    <h2 id="examples">Alpha colors</h2>
                </div>
                <p class="b-b pb-2 my-5 text-secondary">Text color</p><code class="bold small text-center d-block my-0">.color-primary</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-primary op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-primary op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-primary op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-primary op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-primary op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-primary op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-primary op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-primary op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-primary op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-secondary</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-secondary op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-secondary op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-secondary op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-secondary op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-secondary op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-secondary op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-secondary op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-secondary op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-secondary op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-success</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-success op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-success op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-success op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-success op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-success op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-success op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-success op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-success op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-success op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-danger</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-danger op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-danger op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-danger op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-danger op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-danger op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-danger op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-danger op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-danger op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-danger op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-warning</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-warning op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-warning op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-warning op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-warning op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-warning op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-warning op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-warning op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-warning op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-warning op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-info</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-info op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-info op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-info op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-info op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-info op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-info op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-info op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-info op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-info op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-light</code>
                <div class="d-flex flex-wrap justify-content-around mb-4 bg-dark">
                    <p class="my-0 small text-light op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-light op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-light op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-light op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-light op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-light op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-light op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-light op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-light op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-dark</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-dark op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-dark op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-dark op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-dark op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-dark op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-dark op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-dark op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-dark op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-dark op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-alternate</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-alternate op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-alternate op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-alternate op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-alternate op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-alternate op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-alternate op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-alternate op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-alternate op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-alternate op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-contrast</code>
                <div class="d-flex flex-wrap justify-content-around mb-4 bg-dark">
                    <p class="my-0 small text-contrast op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-contrast op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-contrast op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-contrast op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-contrast op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-contrast op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-contrast op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-contrast op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-contrast op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-darker</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-darker op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-darker op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-darker op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-darker op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-darker op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-darker op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-darker op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-darker op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-darker op-9 p-3">.alpha-9</p>
                </div><code class="bold small text-center d-block my-0">.color-black</code>
                <div class="d-flex flex-wrap justify-content-around mb-4">
                    <p class="my-0 small text-black op-1 p-3">.alpha-1</p>
                    <p class="my-0 small text-black op-2 p-3">.alpha-2</p>
                    <p class="my-0 small text-black op-3 p-3">.alpha-3</p>
                    <p class="my-0 small text-black op-4 p-3">.alpha-4</p>
                    <p class="my-0 small text-black op-5 p-3">.alpha-5</p>
                    <p class="my-0 small text-black op-6 p-3">.alpha-6</p>
                    <p class="my-0 small text-black op-7 p-3">.alpha-7</p>
                    <p class="my-0 small text-black op-8 p-3">.alpha-8</p>
                    <p class="my-0 small text-black op-9 p-3">.alpha-9</p>
                </div>
            </div>
        </section>
        <footer class="site-footer section text-center bg-light">
            <div class="divider-shape" style="top: -80px;">
                <!-- mountains --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" style="transform: translateX(-50%) rotate3d(1,0,0,180deg);height: 80px;">
                    <path class="shape-fill shape-fill-light" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z" />
                    <path class="shape-fill shape-fill-light" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z" />
                    <path class="shape-fill shape-fill-light" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z" /></svg></div>
            <div class="container py-5">
                <div class="row align-items-center">
                    <div class="col-md-6 text-center mx-auto"><img src="../img/logo.png" alt="" class="logo">
                        <h2 class="extra-bold text-dark mb-4">DashCore</h2>
                        <p class="mt-2 mb-0 text-secondary small">© 2018 <a class="brand bold" target="_blank" href="https://5studios.net">5studios.net</a>. All Rights Reserved</p>
                    </div>
                </div>
            </div>
        </footer>
    </main><!-- themeforest:js -->
    <script src="../js/01.cookie-consent-util.js"></script>
    <script src="../js/02.1.cookie-consent-themes.js"></script>
    <script src="../js/02.2.cookie-consent-custom-css.js"></script>
    <script src="../js/02.3.cookie-consent-informational.js"></script>
    <script src="../js/02.4.cookie-consent-opt-out.js"></script>
    <script src="../js/02.5.cookie-consent-opt-in.js"></script>
    <script src="../js/02.6.cookie-consent-location.js"></script>
    <script src="../js/card.js"></script>
    <script src="../js/counterup2.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/noframework.waypoints.js"></script>
    <script src="../js/odometer.min.js"></script>
    <script src="../js/prism.js"></script>
    <script src="../js/simplebar.js"></script>
    <script src="../js/swiper.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery.easing.min.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script src="../js/jquery.smartWizard.js"></script>
    <script src="../js/plugins/jquery.animatebar.js"></script>
    <script src="../js/feather.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/aos.js"></script>
    <script src="../js/typed.js"></script>
    <script src="../js/jquery.magnific-popup.js"></script>
    <script src="../js/cookieconsent.min.js"></script>
    <script src="../js/common-script.js"></script>
    <script src="../js/forms.js"></script>
    <script src="../js/stripe-bubbles.js"></script>
    <script src="../js/stripe-menu.js"></script>
    <script src="../js/cc.js"></script>
    <script src="../js/pricing.js"></script>
    <script src="../js/shop.js"></script>
    <script src="../js/svg.js"></script>
    <script src="../js/site.js"></script>
    <script src="../js/03.demo.js"></script><!-- endinject -->
</body>

</html>